<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <div>
          <el-tree style="max-height: 400px"
                   :data="data" :props="defaultProps"
                   highlight-current="true"
                   node-key="id"
                   show-checkbox
                   @node-click="handleNodeClick"
                   ref="tree">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>{{ data.name }}</span>
                </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="12">
        <div>
          <el-form label-position="left" label-width="80px">
            <el-form-item label="上级菜单">
              <el-tag type="success" >{{pMenu.name}}</el-tag>
            </el-form-item>
            <el-form-item label="菜单名称">
              <el-input v-model="from.name"></el-input>
            </el-form-item>
            <el-form-item label="组件路径">
              <el-input v-model="from.component"></el-input>
            </el-form-item>
            <el-form-item label="排序号">
              <el-input v-model="from.sort" ></el-input>
            </el-form-item>
            <el-form-item label="图标">
              <el-input v-model="from.icon" ></el-input>
            </el-form-item>
            <el-form-item label="链接地址">
              <el-input v-model="from.path" ></el-input>
            </el-form-item>
            <el-form-item label="组件名称">
              <el-input v-model="from.componentName" ></el-input>
            </el-form-item>
            <el-form-item label="访问权限">
              <el-input v-model="from.permission" ></el-input>
            </el-form-item>
            <el-form-item label="组件类型">
              <template>
                <el-radio v-model="from.type" label="1">菜单</el-radio>
                <el-radio v-model="from.type" label="2">操作</el-radio>
              </template>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="doModify">添加</el-button>
              <el-button type="warning" @click="doModify">修改</el-button>
              <el-button type="danger" @click="delMenuList">删除</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import menu from "@/api/system/menu";

  export default {
    data() {
      return {
        from: {},
        pMenu:{},
        data: [],
        selectIds:[],
        defaultProps: {
          children: 'children',
          label: 'name'+'component'
        }
      };
    },
    created() {
      this.getMenuTree()
    },
    methods: {
      handleNodeClick(data) {
        this.pMenu = data;
        //保存选择的上级菜单ID
        this.from.pid = res.id;
      },
      getMenuTree() {
        menu.allTree().then((res) => {
          this.data = res;
        })
      },
      doModify(){
        this.$confirm('请确定更新当前菜单信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          menu.modifySysMenu(this.from).then((res)=>{
            if (res.success){
              this.getMenuTree();
            }
          })
        })
      },
      delMenuList(){
        // let parentArr = this.$refs.tree.getHalfCheckedKeys()   //获取半选中状态的id
        this.selectIds = this.$refs.tree.getCheckedKeys()  //获取全选中的id
        // this.selectIds.push(parentArr);
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          menu.del(this.selectIds.toString()).then((res)=>{
            if (res.success) {
              this.getMenuTree();
            }
          })
        })
      }
    }
  };
</script>
<style>
  .el-row {
    margin-bottom: 20px;
  }

  :last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
